<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业三</title>
    <style>
    #d1{
        width: 198px;
        height: 233px;
        background-color: #E8E8E8;
    }
    #d2{
        width: 198px;
        height: 136px;
      /*  border: 1px solid red;*/
        background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img3.png");
    }
    #d4{
        text-align: center;
    }
    #d5 {

        height: 30px;
        font-size: 14px;
        margin-top: 10px;
        color: #0AA1ED;
        font-weight: bolder;
        text-align: center;
    }
    a {
        background-color: #0aa1ed;
        width:110px;
        height: 20px;
        display: block;/*行内元素不能修改宽高,如必须改则修改display为块级或行内块*/
        text-align: center;
        line-height: 20px;
        color: white;
        text-decoration: none;  /*取消下划线*/
        font-size: 16px;
        border-radius: 3px; /*设置圆角*/
        margin:0 auto;
    }
    body {
        font: 12px "simhei", Arial, Helvetica, sans-serif;
    }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
    <div id="d3">戴尔(DELL)XPS13-9360-R1609 13.3英</div>
    <div id="d4">寸微边框笔记本电脑 </div>
    <div id="d5">￥4600.00</div>
    <a href="">查看详情</a>
</div>

</body>
</html>